<template>
  <div>
    <el-button type="primary" @click="handleAdd">添加学习计划</el-button>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="编号" width="180">
        <template #default="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="学习计划" width="180">
        <template #default="scope">{{ scope.row.title }}</template>
      </el-table-column>
      <el-table-column label="是否完成" width="180">
        <template #default="scope">
          <div v-if="scope.row.completed">完成</div>
          <div v-else>未完成</div>
        </template>
      </el-table-column>
      <el-table-column label="其他操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加弹窗 -->
    <el-dialog title="添加学习计划" v-model="dialogAddVisible" width="30%">
      <el-form :model="newSchedule" label-width="100px">
        <el-form-item label="学习计划">
          <el-input v-model="newSchedule.title" />
        </el-form-item>
        <el-form-item label="是否完成">
          <el-switch v-model="newSchedule.completed" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogAddVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAdd">确定</el-button>
      </template>
    </el-dialog>

    <!-- 编辑弹窗 -->
    <el-dialog title="编辑学习计划" v-model="dialogEditVisible" width="30%">
      <el-form :model="editSchedule" label-width="100px">
        <el-form-item label="编号">
          <el-input v-model="editSchedule.id" disabled />
        </el-form-item>
        <el-form-item label="学习计划">
          <el-input v-model="editSchedule.title" />
        </el-form-item>
        <el-form-item label="是否完成">
          <el-switch v-model="editSchedule.completed" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogEditVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmEdit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 删除确认 -->
    <el-dialog title="提示" v-model="dialogDeleteVisible" width="30%">
      <span>确定要删除该学习计划吗？</span>
      <template #footer>
        <el-button @click="dialogDeleteVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmDelete">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from "vue";
import axios from "axios";

interface Schedule {
  id: number;
  title: string;
  completed: boolean;
}

const props = defineProps({
  currentPage: { type: Number, default: 1 },
  pageSize: { type: Number, default: 10 },
});

const emit = defineEmits(["updateTotal"]);

const tableData = ref<Schedule[]>([]);
const dialogAddVisible = ref(false);
const dialogEditVisible = ref(false);
const dialogDeleteVisible = ref(false);
const newSchedule = ref<Schedule>({ id: 0, title: "", completed: false });
const editSchedule = ref<Schedule>({ id: 0, title: "", completed: false });
const deleteScheduleId = ref<number>(0);

const fetchData = async () => {
  try {
    const response = await axios.get(
      `http://localhost:8080/study-plans/${props.currentPage}/${props.pageSize}`
    );
    tableData.value = response.data.data.data;
    emit("updateTotal", response.data.data.total);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
};

const handleAdd = () => (dialogAddVisible.value = true);
const handleEdit = (row: Schedule) => {
  editSchedule.value = { ...row };
  dialogEditVisible.value = true;
};
const handleDelete = (row: Schedule) => {
  deleteScheduleId.value = row.id;
  dialogDeleteVisible.value = true;
};

const confirmAdd = async () => {
  try {
    await axios.post("http://localhost:8080/study-plans", newSchedule.value);
    dialogAddVisible.value = false;
    fetchData();
  } catch (error) {
    console.error("Error adding schedule:", error);
  }
};

const confirmEdit = async () => {
  try {
    await axios.put("http://localhost:8080/study-plans", editSchedule.value);
    dialogEditVisible.value = false;
    fetchData();
  } catch (error) {
    console.error("Error editing schedule:", error);
  }
};

const confirmDelete = async () => {
  try {
    await axios.delete(
      `http://localhost:8080/study-plans/${deleteScheduleId.value}`
    );
    dialogDeleteVisible.value = false;
    fetchData();
  } catch (error) {
    console.error("Error deleting schedule:", error);
  }
};

watch([() => props.currentPage, () => props.pageSize], fetchData);
onMounted(fetchData);
</script>